import React,{Component} from 'react'
import store from '../../redux/store'
import {connect} from 'react-redux'
import {addCount, deCount,asyncAddCount} from '../../redux/action'
class ReduxTest extends Component{
  constructor(props){
    super(props)
    this.state={
    }
  }
  addCount = () => {
    const num = this.select.value * 1
    store.dispatch(addCount(num))
  }
  deCount = () => {
    const num = this.select.value * 1
    store.dispatch(deCount(num))
  }
  asyncAddCount = () => {
    const num = this.select.value * 1
    store.dispatch(asyncAddCount(num))
  }
  render (){
    let count = store.getState().counter
    return (
      <div style={{padding: '50px', background: '#fcf'}}>
        <p className="testP">{count}</p>
        <select ref={s => this.select = s}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.addCount}>+&nbsp;&nbsp;</button>
        <button onClick={this.deCount}>-</button>
        <button onClick={this.asyncAddCount}>异步加</button>
      </div>
    )
  }
}
export default connect(
  state => ({count: state.counter})
)(ReduxTest)
